<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的证照</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #fff;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-bar-nav~.mui-content{padding:0;margin-top:45px;background:#fff;}
			.mui-segmented-control{background:#fff;height:.87rem;padding:0 .5rem;box-sizing:border-box;box-shadow:0 0 5px 1px #ccc;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#1653fc;border-color:#1653fc;}
			/*我的证照库*/
			.license_top{width:7.05rem;overflow:hidden;margin:.2rem auto;padding:.4rem;box-sizing:border-box;background:#f3f3f3;border-radius:.08rem;}
			.license_top>p{margin-bottom:.2rem;color:#333;font-size:.3rem;}
			.license_top>.mui-btn-warning{width:2.42rem;height:.7rem;background:#ff7800;font-size:.32rem;margin-left:1.9rem;}
			.license_top>span{width:100%;float:left;text-align:center;color:#b0b0b0;font-size:.28rem;line-height:.6rem;}
			.mui-table-view .mui-media-body{width:6rem;float:left;overflow:visible;margin-left:.1rem;}
			.mui-table-view .mui-media-body>div{width:100%;float:left;}
			.mui-table-view .mui-media-body .body_view{font-size:.3rem;}
			.mui-table-view .mui-media-body .body_view>span,.mui-table-view .mui-media-body .mui-ellipsis>span{float:left;width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:.5rem;}
			.mui-table-view .mui-media-body .work_time{color:#b0b0b0;font-size:.28rem;}
			.work_time .licence_num{width:4.5rem;overflow:hidden;float:left;white-space:nowrap;text-overflow:ellipsis;}
			.work_time .jibei{font-size:.32rem;color:#b0b0b0;margin-right:.25rem;}
			.mui-table-view .mui-media-body .mui-ellipsis{color:#b0b0b0;font-size:.28rem;overflow:visible;}
			.mui-table-view-cells{padding:0;margin-bottom:.15rem;background:#fff;position:sticky;z-index: -10;}
			.mui-media-box{padding:.38rem 0 0 .25rem;float:left;}
			.mui-table-view-cells>a:not(.mui-btn){margin:0;padding:0;}
			.mui-push-right:after{content:"";}
			.mui-table-view-cells:after,.mui-table-view:before,.mui-table-view:after{height:0;}
			.evaluate{width:100%;border-top:1px solid #ececec;height:.9rem;font-size:.3rem;text-align:center;margin-top:.2rem;float:left;}
			.evaluate>a{display:inline-block;width:1.73rem;margin:0 .28rem;line-height:.9rem;color:#666;}
			.mui-slider .mui-slider-group .evaluate>a>img{float:left;width:.36rem;margin:.26rem .1rem 0 0;}
			.mui-table-view{background:#eeeeee;position:sticky;}
            .navigate_img{width:.9rem;height:.9rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:.9rem !important;margin:0;max-height:.9rem;}
			/*我的自制材料*/
			.mui-slider .mui-slider-group .licence_upload>p>img{width:.3rem;float:left;margin-right:.18rem;margin-top:.06rem;}
			.licence_upload>p>span{color:#d77a28;}
			.licence_upload .file_sum{width:100%;float:left;text-align:center;font-size:.6rem;line-height:.55rem;}
			.licence_upload .mui-btn-warning{background:#22ac38;margin-top:.05rem;border-color:#22ac38;}
			.mui-table-view .icon-more{width:.45rem !important;float:right !important;height:.45rem;position:relative;background:url(../../images/work/icon-gd-@2x.png) no-repeat;background-size:100% 100%;margin-right:.24rem;
			background-position:center center);}
			.mui-table-view .icon-more>img{margin-top:-.03rem;}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:2px solid #007aff;}
			/*弹层*/
			.more_message{width:7rem;top:.5rem;background:#fff;border-radius:.06rem;position:absolute;right:.25rem;z-index:5;border:1px solid #e2e2e2;display:none;}
			.more_message .more_message_box{position:relative;width:100%;float:left;padding:.35rem .38rem;box-sizing:border-box;}
			.more_message .more_message_box>i{width:.2rem;height:.2rem;position:absolute;top:-.15rem;right:.15rem;background:url(../../images/work/arrow_up.png) no-repeat;}
			.bg_gray{width:7.5rem;background:rgba(0,0,0,0.3);height:18rem;position:fixed;top:-.9rem;z-index:3;right:0;}
			.mui-icon-trash{font-size:.4rem;color:#8c8c8c;float:left;margin-right:.05rem;}
			.message_info{font-size:.28rem;}
			.mui-scroll{position:inherit;}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							我的证照库
						</a>
						<a class="mui-control-item" href="#item2mobile">
							我的自制材料
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="license_top">
									<p>系统通过用户证件号码（个人以身份证为唯一标识，法人以统一社会信用代码为唯一标识）自动同步、采集省、市两级政务电子证照库中各类证照、批文等电子证照信息。</p>
									<!--<button type="button" class="mui-btn mui-btn-warning">同步证照库</button>-->
									<span>上次更新时间：2017-05-18  14:43</span>
								</div>
								<ul class="mui-table-view" id="item_ul_1">
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="license_top licence_upload">
									<p>
										<!--<img src="../../images/license/tx.png">-->
										<span>自制材料上传固定容量为100M。超过固定容量的，需清理后才能上传。</span>
									</p>
									<div class="file_sum">20.55M</div>
									<span>上次更新时间：2017-05-18  14:43</span>
									<button type="button" class="mui-btn mui-btn-warning">上传材料</button>
								</div>
								<ul class="mui-table-view" id="item_ul_2">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function my_immersed(immersed){
			}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../js/app.js"></script>
		<script>
			var pageNumber_0 = 0;//当前页码
			var pageNumber_1 = 0;//当前页码
			var pageSize = 5;//每页显示的条数
			var maxPageNumber_0 = 1;//最大页数
			var maxPageNumber_1 = 1;//最大页数
			var pullToRefresh_0 = null;
			var pullToRefresh_1 = null;
			mui.init();
			mui.plusReady(function() {
				pullToRefresh_0.pullUpLoading();
				pullToRefresh_1.pullUpLoading();
			});
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
							var pullToRefresh = $(pullRefreshEl).pullToRefresh({
								down: {
									callback: function() {
										var self = this;
										setTimeout(function() {
											var ul = self.element.querySelector('.mui-table-view');
											var pageNumber = 1;
											pageNumber_0 = 1;
											pageNumber_1 = 1;
											createFragment(index,pageNumber,pageSize,function(data) {
												var fragment = getAppEleclicenList(index,data);
												if(fragment == '' || fragment == 'error') {
													self.endPullDownToRefresh(true);
												}else {
													self.refresh(true);//这句很关键！有重新触发上拉加载
													ul.innerHTML = '';
													ul.insertBefore(fragment, ul.firstChild);
													self.endPullDownToRefresh();
												}
											})
										}, 1000);
									}
								},
								up: {
									callback: function() {
										var self = this;
										setTimeout(function() {
											var ul = self.element.querySelector('.mui-table-view');
											var pageNumber;
											var tempNum;
											if(index == 0){
												pageNumber_0++;//翻下一页
												pageNumber = pageNumber_0;
												tempNum = maxPageNumber_0;
											}
											if(index == 1){
												pageNumber_1++;//翻下一页
												pageNumber = pageNumber_1;
												tempNum = maxPageNumber_1;
											}
											if(pageNumber<=tempNum){
												createFragment(index,pageNumber,pageSize, function(data) {
													var fragment = getAppEleclicenList(index,data);
													if(fragment == '' || fragment == 'error') {
														self.endPullUpToRefresh(true);
													}else {
														ul.appendChild(fragment);
														if(data.code == 0 && data.resultSize < pageSize){
															self.endPullUpToRefresh(true);
														}else{
															self.endPullUpToRefresh();
														}
													}
												})
											}else{
												self.endPullUpToRefresh(true);
											}
										}, 1000);
									}
								}
							});
							
						if(index == 0){
							console.log("pullToRefresh_0=="+pullToRefresh)
							pullToRefresh_0 = pullToRefresh;
						}
						
						if(index == 1){
							console.log("pullToRefresh_1=="+pullToRefresh)
							pullToRefresh_1 = pullToRefresh;
						}
					});
					
					
					/**
					 * @param {Object} index 
					 * @param {Object} callback 回调函数
					 */
					function createFragment(index, pageNumber,pageSize, callback) {
						if(index == 0){
							var param = 'userId='+getUserId()+'&userType=0&companyCardno=&pageNumber=' + pageNumber+ '&random=' + Math.random()+'&pageSize=' + pageSize;
							var url = 'appHttpService/appEleclicenList.do';
							utils.ajax(url, function(data) {
								data = JSON.parse(data);
								callback(data);
							}, param);	
						}
						
						if(index == 1){
							var param = 'userId='+getUserId()+'&pageNumber=' + pageNumber+ '&random=' + Math.random()+'&pageSize=' + pageSize;
							var url = 'appHttpService/appNetUserLicenseList.do';
							utils.ajax(url, function(data) {
								data = JSON.parse(data);
								callback(data);
							}, param);	
						}
					};
				 
				    /**
				     * @param {Object} index 选项卡号
				     * @param {Object} data 数据
				     */
				    function getAppEleclicenList(index,data){
				    	if(index == 0){
				    		if(data.code == 0) {
								maxPageNumber_0 = data.maxPageNumber;
								var temp = JSON.parse(data.eleclicenListJson);
								if(temp != null && temp.length > 0){
									var fragment = document.createDocumentFragment();
									for(var i in temp) {
										var zzType = "批文";
										if(temp[i].licenseType == 0){
											zzType = "证照";
										}
										var li = document.createElement('li');
										li.className = 'mui-table-view-cells mui-media';
										var temp_html = "";
										temp_html += "<div class='mui-media-box'>" +
															"<span class='navigate_img bg_blue'><img class='tjfwl' src='../../images/license/licence.png'></span>" +
															"<div class='mui-media-body'>" +
															"<div class='body_view' id=''><span>【" + zzType + "】" + temp[i].licenseName.trim() + "</span></div>" +
																"<div class='work_time'>" +
																	"<span class='licence_num'>证照编号：" + temp[i].licenseNumber + " </span>" +
																	"<span class='fr jibei'>" + temp[i].licenseClassifyStatus + "级</span>" +
																"</div>" +
																"<div class='mui-ellipsis'><span>有效期：" + new Date(temp[i].validDate).getDateStr(3) + "</span></div>" +
															"</div>" +
													"</div>" +
													"<div class='evaluate'>" +
														"<a class='show_licence' id="+temp[i].oid+" typeVal='view'><img src='../../images/license/show.png'>查看详情</a>" +
														"<a class='show_licence' id="+temp[i].oid+" typeVal='err' licenseName="+temp[i].licenseName+"><img src='../../images/license/wrong.png'>申请报错</a>" +
													"</div>" 
									    li.innerHTML = temp_html;
										fragment.appendChild(li);
									}
									return fragment;
								}else{
									return '';
								}
							}else{
								return 'error';
							}
						}
				    	
				    	if(index == 1){
							if(data.code == 0) {
								maxPageNumber_1 = data.maxPageNumber;
								var temp = JSON.parse(data.netUserLicenseListJson);
								if(temp != null && temp.length > 0){
									var fragment = document.createDocumentFragment();
									for(var i in temp) {
										var li = document.createElement('li');
										li.className = 'mui-table-view-cells mui-media';
										var temp_html = "";
										temp_html += "<div class='mui-media-box'>" +
															"<span class='navigate_img bg_blue'><img class='tjfwl' src='../../images/license/licence.png'></span>" +
															"<div class='mui-media-body'>" +
															"<div class='body_view' id=''><span>" + temp[i].licenseName.trim() + "</span><span class='icon-more'></span></div>" +
																"<div class='mui-ellipsis'><span>上传时间：" + new Date(temp[i].uploadDate).getDateStr(3) + "</span></div>" +
															"</div>" +
													"</div>" +
													"<div class='evaluate'>" +
														"<a class='show_licence' id="+temp[i].oid+"><img src='../../images/license/show.png'>查看详情</a>" +
													"</div>" 
									    li.innerHTML = temp_html;
										fragment.appendChild(li);
									}
									return fragment;
								}else{
									return '';
								}
							}else{
								return 'error';
							}
						}
				    	
				    }
				});
			})(mui);
			
			
			/**
             * 查看详情页面
             */
			mui("body").on('tap','#item_ul_1 .evaluate a',function(){
				var oid = this.getAttribute('id');
				var typeVal = this.getAttribute('typeVal');
				if(typeVal == 'view'){
					//查看详情
					showTemplates('my_eleclicen_detail.html','证照详情','../my/my_eleclicen_detail.html?oid='+oid);
				}
				
				if(typeVal == 'err'){
					//申请报错
				}
            }) 
			
		</script>
	</body>

</html>